<!-- AUTHORS: Yiwei (Alan) Han, Kevin Lam -->

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Section Details - UBC Course Companion</title>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false">
	
</script>
<script language="JavaScript" type="text/javascript"
	src="/js/ajax_details.js"></script>
<link rel="stylesheet" type="text/css" media="all"
	href="/style/details.css" />
</head>
<body
	onload="initMap(<c:out value="${section.lat}"/>,<c:out value="${section.lng}"/>);
		getSeatContent('<c:out value="${section.dept}"/>','<c:out value="${section.course}"/>','<c:out value="${section.section}"/>');
		getRMPContent('<c:out value="${section.instructor }"/>');
		getBookContent('<c:out value="${section.dept}"/>','<c:out value="${section.course}"/>','<c:out value="${section.section}"/>');
		appendWorklistButton('<c:out value="${section.dept}"/>','<c:out value="${section.course}"/>','<c:out value="${section.section}"/>')">
	<div id="navdiv">
		<%@ include file="header.jsp"%>
	</div>
	<%@ include file="feed.jsp"%>
	<div id="bg">
		<img id="bg-img" src="/images/bg-brushed-aluminum.png" />
	</div>
	<div id="content">
		<div id="title" class="info-container">
			<p class="course_title"><c:out value="${section.dept}"/> <c:out value="${section.course}"/></p>
			<p class="course_description"><c:out value="${section.title}"/></p>
		</div>
		<div id="section" class="info-container">
			<p class="section_info">Section <c:out value="${section.section}"/>
				(<c:out value="${section.activity}"/>)</p>
		</div>

		<div id="course_details" class="info-container">
			<div id="information">
				<div id="campus">
					<p class="header">Campus:&nbsp;&nbsp;</p>
					<c:out value="${section.location}"/>
				</div>
				<div id="term">
					<p class="header">Term:&nbsp;&nbsp;</p>
					<c:out value="${section.term }"/>
				</div>
				<div id="cdf">
					<p class="header">Credit/D/Fail:&nbsp;&nbsp;</p>
					<c:out value="${section.cdf }"/>
				</div>
				<div id="drop">
					<p class="header">Drop Deadline:&nbsp;&nbsp;</p>
					<c:out value="${section.drop }"/>
				</div>
				<div id="withdraw">
					<p class="header">Withdraw Deadline:&nbsp;&nbsp;</p>
					<c:out value="${section.withdraw }"/>
				</div>
				<div id="day"><c:out value="${section.day }"/></div>
				<div id="time"><c:out value="${section.start }"/> - <c:out value="${section.end}"/></div>
				<div id="building">
					<p class="header">Building:&nbsp;&nbsp;</p>
					<c:out value="${section.building }"/>
				</div>
				<div id="room">
					<p class="header">Room:&nbsp;&nbsp;</p>
					<c:out value="${section.room}"/>
				</div>
				<br>
				<div id="seat">
					<p class="header">Seat information</p>
					<p class="progress">
						<img id="seat-progress" src="images/ajax-loader.gif">
					</p>
				</div>
			</div>
			<div id="map">
				<div id="map_canvas"></div>
			</div>
		</div>
		<div id='instructor' class="info-container">
			<p class="info-header">Instructor Information</p>
			<p class="progress">
				<img id="instructor-progress" src="images/ajax-loader.gif">
			</p>
		</div>
		<div id='book' class="info-container">
			<p class="info-header">Textbook and other resource information</p>
			<p class="progress">
				<img id="book-progress" src="images/ajax-loader.gif">
			</p>
		</div>
	</div>
	<div id="footer-wrap">
		<div id="footer">
			<img
				src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif"
				alt="Powered by Google App Engine" />
			<p class="about">&copy; 2011 UBC Course Companion</p>
		</div>
	</div>
	<div id="dimmer">
	</div>
		<div id="notification-dialog-container">
		<form >
			<table id="notification-dialog-table">
				<tr>
					<td colspan='2'><p class="select-seat-header">Select Seat Type</p></td>
				</tr>
				<tr>
					<td><input type="radio" name="seatcfg" id="seatgen" value="1" checked/>General</td>
					<td><input type="radio" name="seatcfg" id="seatres" value="2" />Restricted</td>
				</tr>
				<tr>
					<td><p class='notification-button' onclick="sendNotificationRequest('<c:out value="${section.dept}"/>','<c:out value="${section.course}"/>','<c:out value="${section.section}"/>');">Submit</p></td>
					<td><p class='notification-button' onclick="closeNotificationRequestDialog();">Close</p></td>
				</tr>
			</table>
		</form>
		</div>
	<div id="notification-error">
	</div>
	<div id="worklist-error">
	</div>
</body>
<script type="text/javascript">
	
</script>
</html>
